<template>
	<view v-if="show" style="height:100vh;overflow:hidden;position: fixed;">
		<image src="../../static/bg2@2x.png" style="width:100vw;" mode="widthFix"></image>
		<view style="position: absolute;top:200upx;left:0;right:0;text-align: center;">
			<image src="../../static/ai-logo2.png" style="height:80px;" mode="heightFix"></image>
			<!-- <image src="../../static/logo@2x.png" style="height:50px;" mode="heightFix"></image> font-style: italic;-->
			<!-- <view style="font-size:32px;color: #FFFFFF;font-weight: bold;">AI智能测肤</view> -->
		</view>
		<view style="position: absolute;bottom:50rpx;left:0;right:0;">
			<view style="width:60%;margin: auto;" Data-btnname="开始测肤" @click="toNext">
				<image src="../../static/ai-button.png" style="width:460rpx;height: 180rpx;" />
				<!-- <button class="weui-btn weui-btn_primary" style="font-size:20px;line-height:2.2;" Data-btnname="测肤建档">测肤建档</button> -->
			</view>
		</view>


		<my-mask :height="height" :flag="courseFlag" :styleObj="{'justify-content': 'flex-start'}">
			<view class="courseTitle">{{text[txtType].title}}</view>
			<view class="scroll-container">
				<scroll-view scroll-y="true" class="scroll-Y" style="width: 100%;height: 100%;" :scroll-top="scrollTop"
					@scroll="scroll">
					<view style="font-size: 24rpx;margin: 5rpx;" v-for="(t,i) in text[1].txt" v-show="txtType==1"
						:key="i">
						{{t}}
						<text v-show="i==text[1].txt.length-3" class="course-txt"
							@click="toCourse('2')">《个人信息保护政策》</text>
						<text v-show="i==text[1].txt.length-1" class="course-txt"
							@click="toCourse('3')">《Face++人工智能开放平台隐私政策》</text>
					</view>
					<rich-text :nodes="text[2].txt" v-show="txtType==2" style="font-size: 24rpx;margin: 5rpx;">
					</rich-text>
					<view v-html="text[3].txt" v-show="txtType==3" style="font-size: 24rpx;margin: 5rpx;"></view>
				</scroll-view>
			</view>
			<view class="course-info" v-if="txtType==1">
				我已知晓本服务的基本业务功能收集上述个人信息，并同意对其的收集、使用行为。
			</view>
			<view class="course-button" @click="toAgree(txtType)"
				:style="txtType==1?'margin-bottom:20rpx;':'margin-top:40rpx'">
				{{butTxt}}
			</view>
			<view @click="noAgree" v-if="txtType==1" style="color:#666666;margin-bottom:10rpx;font-size: 24rpx;">
				不同意
			</view>
		</my-mask>
	</view>
</template>

<script>
	import txt from "../../common/js/txt.js";
	export default {

		components: {},
		data() {
			return {
				show: true,
				courseFlag: false,
				noFlag: false,
				agreement: false,
				height: "800",
				text: '',
				txtType: '1',
				butTxt: '同意',

				scrollTop: 0,
				old: {
					scrollTop: 0
				},

			}
		},
		onLoad(e) {
			console.log(e);
			if (e.userId != undefined && e.userId != '') {
				this.$users.setInfo({
					ID: e.userId,
					NickName: e.nickName,
					Mobile: e.phone == undefined ? '' : e.phone,
					UnionId: e.unionId == undefined ? '' : e.unionId
				});
			} else {
				this.$common.to("../oauth/empty");
			}


			this.$users.checkLogin(() => {
				this.show = true;
				if (this.$common.getStorage("ShowCourse1") == undefined) {
					this.$common.setStorage("ShowCourse1", 1);
					this.courseFlag = true;
				}

				if (this.$common.getStorage("ShowCourse2") == 2) {
					this.$common.setStorage("ShowCourse2", 1);
					this.courseFlag = true;
				}
			});

			this.text = txt.txt; //协议内容
		},
		onShow(e) {
			let _this = this;
			_this.handleSugoioLoad('首页', 'guest-home')
		},
		methods: {
			toNext: function() { //测肤
				this.courseFlag = false;
				if (this.agreement == true) {
					this.noFlag = true;
				}
				if (this.noFlag == true) {
					this.courseFlag = true;
					this.noFlag = false;
					this.agreement = false;
				} else {
					this.$common.to("../skin/guest-add");
				}
			},
			toAgree: function(e) { //返回
				if (e > 1) {
					this.butTxt = "同意";
					this.txtType = '1';
					this.height = "800";
				} else {
					this.courseFlag = false;
					this.$common.setStorage("ShowCourse2", 1);
				}
			},
			noAgree: function() { //不同意
				this.courseFlag = false;
				this.agreement = true;
				this.$common.setStorage("ShowCourse2", 2);
			},
			toCourse: function(e) { //进入文档
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				this.txtType = e;
				this.butTxt = "返回";
				this.height = "660";
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>


<style lang="scss">
	.courseTitle {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		background-color: #FFFFFF;
		color: #000000;
		margin-bottom: 20rpx;
	}

	.scroll-container {
		width: 492rpx;
		height: 406rpx;
		background: #f9f9f9;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;

		color: #333333;
		line-height: 14px;

	}

	.course-info {
		width: 492rpx;
		margin: 20rpx 0rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 1.3;

	}

	.course-button {

		width: 492rpx;
		height: 80rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(90deg, #FF6590 0%, #FF6A6A 100%);
		border-radius: 27px;
	}

	.course-txt {
		color: #138FFF;
		text-decoration: underline;
		width: 492rpx;

		&:hover {
			opacity: 0.8;
		}
	}
</style>
